<template>
	<div>
		<el-container class="main-container">
		  <el-header>
				<el-row>
					<el-col :span="3" class="logo"><img src="../../assets/logo.png" alt=""></el-col>
					<el-col :span="5">
						<div class="return"><i class="el-icon-arrow-left" @click="returns"></i></div>
						<div class="return"><i class="el-icon-arrow-right" @click="nexts"></i></div>
					</el-col>
					<el-col :span="16">
						<div class="main-search">
							<search class="main-search-ch"></search>
						</div>
					</el-col>
				</el-row>
			</el-header>
		  <el-container>
		    <el-aside width="260px">
					<asides class="asides"></asides>
				</el-aside>
		    <el-main>
					<keep-alive include="home">
						<router-view :key="$route.fullPath"></router-view>
					</keep-alive>
				</el-main>
		  </el-container>
		</el-container>
		<audios @openLyrics="openLyrics"></audios>
		<play-lyrics ref="openLyrics"></play-lyrics>
	</div>
</template>

<script>
	import Asides from "../asides/Asides.vue"
	import Search from "../header/Search.vue"
	import Audios from "../audio/Audio.vue"
	import PlayLyrics from "../playLyrics/playLyrics.vue"
	export default {
	  name: 'Mains',
	  components: {
	    Asides,
			Search,
			Audios,
			PlayLyrics
	  },
		methods: {
			returns() {
				this.$router.go(-1);
			},
			nexts() {
				this.$router.go(+1);
			},
			// 打开歌词
			openLyrics() {
				this.$refs.openLyrics.openLyrics();
			}
		}
	}
</script>

<style lang='less' scoped>
	.main-container{
		height: 100vh;
	}
	.el-header {
		height: 60px;
		background: var(--sub-color);
		padding: 0;
		box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1);
		position: sticky;
		top: 0;
		left: 0;
		z-index: 90;
	}
	.logo {
		height: 60px;
		display: flex;
		align-items: center;
	}
	.logo img{
		margin-left: 15px;
		width: 100px;
	}
	.return {
		width: 25px;
		height: 25px;
		margin-left: 10px;
		border-radius: 50%;
		float: left;
		text-align: center;
		line-height: 25px;
		cursor: pointer;
		margin-top: 16px;
		font-size: var(--second-font-size);
	}
	.return:hover {
		background-color: var(--hover-bgcolor);
	}
	.el-aside {
		background: var(--main-color);
		height: 83vh;
		overflow: auto;
	}
	.el-main {
		padding: 0;
		margin-bottom: 60px;
		height: 83vh;
		overflow: auto;
	}
	.asides {
		width: 100%;
		overflow: hidden;
	}
	.main-search{
		margin-right: 50px;
		height: 60px;
		float: right;
		display: flex;
		align-items: center;
	}
</style>
